<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Purple Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css"/>
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- endinject -->
    <link rel="shortcut icon" href="../../images/favicon.png"/>
    <style type="text/css">
        #Conframe {
            border: none;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="showTbody">
    <div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <i class="mdi mdi-home menu-icon"></i>首页/权限/员工管理
        </div>
        <div class="card-body">
            <h4 class="card-title"><i class="mdi mdi-format-list-bulleted menu-icon"></i>数据列表</h4>
            <div>
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="text-align: center;line-height: 34px">输入搜索:</div>&emsp;
                            <input type="text" th:value="${selEmpName}" id="empName" class="form-control col-md-6"
                                   placeholder="员工姓名"/>
                        </div>
                        &emsp;
                        <label class="sr-only" for="dId"></label>
                        <div class="input-group">
                            <div class="input-group-addon" style="text-align: center;line-height: 34px">所属部门:</div>&emsp;
                            <select id="dId" class="form-control col-md-6">
                                <option value="0">全部</option>
                                <option th:each="dept:${deptPage}" th:selected="${selDId+'' eq dept.did+''}"
                                        th:text="${dept.dName}" th:value="${dept.did}"></option>
                            </select>
                        </div>
                    </div>
                    &emsp;&emsp;
                    <button onclick="qryEmpBy()" type="button" class="btn btn-primary btn-sm">查询</button>
                    &emsp;&emsp; &emsp;&emsp; &emsp;&emsp; &emsp;&emsp;
                    <button id="addRoleBtn" type="button" class="btn btn-danger btn-sm text-right" data-toggle="modal"
                            data-target="#myModal">
                        添加
                    </button>
                </form>
            </div>
            <!-- 弹出层添加列表 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <h4 class="modal-title text-center" id="myModalLabel">添加员工</h4>
                        <form class="forms-sample" id="editEmpFrom">
                            <!--隐藏员工ID,根据id判断是修改还是添加-->
                            <input type="hidden" id="editEmpId" name="eId" value="0"/>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="empLoginName" class="text-left">账号</label>
                                    <input type="text" name="empLoginName" class="form-control" id="empLoginName"/>
                                </div>
                                <div class="form-group">
                                    <label for="cEmpName" class="text-left">员工姓名</label>
                                    <input type="text" name="empName" class="form-control" id="cEmpName"/>
                                </div>
                                <div class="form-group">
                                    <label for="cPhone" class="text-left">手机号</label>
                                    <input type="text" name="phone" class="form-control" id="cPhone"/>
                                </div>
                                <div class="form-group">
                                    <label for="cEmail" class="text-left">邮箱地址</label>
                                    <input type="text" name="email" class="form-control" id="cEmail"/>
                                </div>
                                <div class="form-group">
                                    <label for="cdId" class="text-left">所属部门</label>
                                    <select id="cdId" name="did" class="form-control col-md-6">
                                        <option value="0">全部</option>
                                        <option th:each="dept:${deptPage}" th:selected="${selDId+'' eq dept.did+''}"
                                                th:text="${dept.dName}" th:value="${dept.did}"></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="crId" class="text-left">所属角色</label>
                                    <select id="crId" name="rid" class="form-control col-md-6">
                                        <!--<option value="0">全部</option>-->
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="cPassWord" class="text-left">登录密码</label>
                                    <input type="text" name="empPasswrod" class="form-control" id="cPassWord"/>
                                </div>
                                <div class="form-group">
                                    <label for="cPassWord2" class="text-left">确认密码</label>
                                    <input type="text" class="form-control" id="cPassWord2"/>
                                </div>
                                <div class="form-group">
                                    <div class="form-check form-check-primary">
                                        <label class="form-check-label">
                                            允许登录:
                                            <input id="cEnable" value="1" name="enable" type="checkbox"
                                                   class="form-check-input" checked="checked"/>
                                            <i class="input-helper"></i></label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                                <button type="button" id="editBtn" class="btn btn-primary btn-sm" data-dismiss="modal">保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /弹出层添加列表 -->
            <!--Role列表-->
            <table class="table table-bordered">
                <thead>
                <tr class="table-danger">
                    <th>成员账号</th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>邮箱地址</th>
                    <th>所属部门</th>
                    <th>成员角色</th>
                    <th>最后登录</th>
                    <th>是否启用</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="emp:${empPage}">
                    <td th:text="${emp.empLoginName}"></td>
                    <td th:text="${emp.empName}"></td>
                    <td th:text="${emp.phone}"></td>
                    <td th:text="${emp.email}"></td>
                    <td th:text="${emp.empDep.dName}"></td>
                    <td th:text="${emp.roleStr}"></td>`
                    <td th:text="${emp.createTimeStr}"></td>
                    <td th:if="${emp.enable} eq '1'">
                        <div class="form-check form-check-primary">
                            <label class="form-check-label">
                                <!--隐藏域保存部门id -->
                                <input th:value="${emp.eId}" type="hidden"/>
                                <input th:value="${emp.enable}" name="empCheck" type="checkbox"
                                       class="form-check-input" th:checked="checked"/>
                                是否启用
                                <i class="input-helper"></i></label>
                        </div>
                    </td>
                    <td th:if="${emp.enable} eq '0'">
                        <div class="form-check form-check-primary">
                            <label class="form-check-label">
                                <!--隐藏域保存部门id-->
                                <input th:value="${emp.eId}" type="hidden"/>
                                <input th:value="${emp.enable}" name="empCheck" type="checkbox"
                                       class="form-check-input"/>
                                是否启用
                                <i class="input-helper"></i></label>
                        </div>
                    </td>
                    <td>
                        <input type="hidden" th:value="${emp.eId}"/>
                        <a href="JavaScript:void(0);" name="updEmpBtn" data-target="#myModal"
                           data-toggle="modal">编辑</a>&emsp;
                        <a href="JavaScript:void(0);" name="delEmpBtn">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--/Role列表-->
            <br/>
            <div class="text-right">
                <p>
                    当前 <span id="cPage" th:text="${pageInfo.pageIndex}"></span> 页,总 <span id="totalPage"
                                                                                          th:text="${pageInfo.totalPageCount}"></span>
                    页,共 <span id="totalCount" th:text="${pageInfo.totalCount}"></span> 条记录
                </p>
                <a href="JavaScript:void(0);" onclick="first(1)">首页</a>&emsp;
                <a href="JavaScript:void(0);" id="per" onclick="per()">上一页</a>&emsp;
                <span th:text="${pageInfo.pageIndex}" style="color: red"></span>&emsp;
                <a href="JavaScript:void(0);" id="next" onclick="next()">下一页</a>&emsp;
                <a href="JavaScript:void(0);" onclick="last()">末页</a>
                <div class="nav-item dropdown">
                    <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#"
                       data-toggle="dropdown" aria-expanded="true">
                        请选择
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
                         aria-labelledby="messageDropdown">
                        <li th:each="int:${pageArr}"><a th:text="${int}" href="JavaScript:void(0)" name="pageTo"
                                                        class="dropdown-item preview-item"></a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--jquery-->
<script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- plugins:js -->
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../../js/dashboard.js"></script>
<!-- End custom js for this page-->
<script type="text/javascript">
    $('.dropdown-toggle').dropdown();

    //动态查询方法
    function qryEmpBy() {
        var dId = $("#dId").val();
        var empName = $("#empName").val();
        if (empName == "") {
            empName = "0";
        }
        ajaxPage(1, dId, empName);
    }

    //跳首页
    function first(pageIndex) {
        var dId = $("#dId").val();
        var empName = $("#empName").val();
        ajaxPage(pageIndex, dId, empName);
    }

    //上一页
    function per() {
        var dId = $("#dId").val();
        var empName = $("#empName").val();
        var pageIndex = $("#cPage").html();
        if (parseInt(pageIndex) === 1) {
            alert("已到首页");
            return;
        }
        ajaxPage(parseInt(pageIndex) - 1, dId, empName);
    }

    //下一页
    function next() {
        var dId = $("#dId").val();
        var empName = $("#empName").val();
        var pageIndex = $("#cPage").html();
        var totalPage = $("#totalPage").html();
        if (pageIndex === totalPage) {
            alert("已到尾页");
            return;
        }
        ajaxPage(parseInt(pageIndex) + 1, dId, empName);
    }

    //末页
    function last() {
        var dId = $("#dId").val();
        var empName = $("#empName").val();
        var pageIndex = $("#totalPage").html();
        ajaxPage(pageIndex, dId, empName);
    }

    //分页ajax请求方法
    function ajaxPage(pageIndex, dId, empName) {
        $.ajax({
            "url": "/emp/selectPageBy",
            "type": "post",
            "data": {
                "pageNum": pageIndex,
                "empName": empName,
                "dId": dId
            },
            "dataType": "text",
            success: function (data) {
                $("#showTbody").load(data);
            },
            error: function () {
                alert("分页ajax异常")
            }
        });
    }

    $(function () {
        //改是否启用的状态(enable)
        $("[name = empCheck]").click(function () {
            var enableEmp = $(this);
            var enable = enableEmp.val();
            if (enable == 0) {
                enable = 1;
            } else {
                enable = 0;
            }
            enableEmp.val(enable);
            var updEnable = enableEmp.val();
            var empId = enableEmp.prev().val();
            //发送ajax请求修改启用状态
            $.ajax({
                "url": "/emp/updEmpEnable",
                "type": "post",
                "data": {
                    "empId": empId,
                    "updEnable": updEnable
                },
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                },
                error: function () {
                    alert("ajax异常");
                }
            });
        });

        //选择性跳页
        $("[name = pageTo]").click(function () {
            var dId = $("#dId").val();
            var empName = $("#empName").val();
            var $pageTo = $(this);
            var pageIndex = $pageTo.html();
            ajaxPage(pageIndex, dId, empName);
        });

        //删除
        $("[name = delEmpBtn]").click(function () {
            var $delBtn = $(this);
            var eId = $delBtn.prev().prev().val();
            $.ajax({
                "url": "/emp/delEmpById?eId=" + eId,
                "type": "post",
                "data": "",
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/emp/getAllEmp");
                },
                error: function () {
                    alert("删除ajax异常")
                }
            });
        });

        //新增和修改Role的表单提交
        $("#editBtn").click(function () {
            var crId = $("#crId").val();
            if (crId === "0" || crId == null) {
                alert("请选择角色");
                return;
            }
            var empId = $("#editEmpId").val();
            $.ajax({
                "url": "/emp/editEmp?employee=" + $("#editEmpFrom").serialize(),
                "type": "post",
                "data": {"empId": empId},
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/emp/getAllEmp");
                },
                error: function () {
                    alert("新增/修改ajax异常")
                }
            })
        });

        //点击新增按钮,将h4标签的html改为(添加角色)
        $("#addRoleBtn").click(function () {
            $("#myModalLabel").html("添加员工");
        });

        //修改Role
        $("[name = updEmpBtn]").click(function () {
            var $updEmp = $(this);
            var eId = $updEmp.prev().val();
            //发送ajax请求,根据roleId查出角色
            $.ajax({
                "url": "/emp/getEmpById?eId=" + eId,
                "type": "get",
                "data": "",
                "dataType": "json",
                success: function (data) {
                    $("#empLoginName").val(data.empLoginName);
                    $("#editEmpId").val(data.eId);
                    $("#cEmpName").val(data.empName);
                    $("#cPhone").val(data.phone);
                    $("#cEmail").val(data.email);
                    $("#cdId").val(data.did);
                    $("#crId").val(data.rid);
                    //将弹出层主题改为(修改部门)
                    $("#myModalLabel").html("修改员工")
                },
                error: function () {
                    alert("获取Role的ajax异常")
                }
            });
        });

        //2级联动修改部门所存在的角色
        $("#cdId").change(function () {
            var dId = $(this).val();
            //取到部门id的值,查询该部门下所有的角色
            $.ajax({
                "url": "/role/getRoleByDid?dId=" + dId,
                "data":"",
                "type":"get",
                "dataType":"json",
                success:function (data) {
                    var $roles = $(data);
                    var roleStr = "";
                    $roles.each(function () {
                        roleStr += "<option value="+this.rId+">"+this.rName+"</option>";
                    });
                    $("#crId").html(roleStr);
                },
                error: function () {
                    alert("查询ajax异常")
                }
            });
        });

    })
</script>
</body>

</html>
